<template>
	<view>

	<view class="first-gift-boxs" v-show="postershow">
		<!-- fadeIn 渐渐显示 fadeInDown fadeInDownBig 从上往下 fadeInUpBig 从下往上 flipInY横向转动 zoomIn放大-->
		<view class="content-box animated"  hover-class="bounce">
			<view class="popview">
				<!-- <u-popup v-model="postershow" mode="bottom" width="100%" height="auto" @close="posterquxiao" z-index="100"> -->
					<view class="pview">
						<view class="tubg" id="pagePoster" ref="htmlCanvas">
							<img :src="info.img_bjs?info.img_bjs:'/static/img/img_bjs.png'" mode="" class="img_bjs" />
							<view class="tubgview">
								<img :src="info.logoshare" mode="" class="logoshare"/>
								<!-- <image :src="qrcodeSrc" mode="" class="maview"></image> -->
								<view class="mabot">

									<uv-qrcode ref="qrcode" size="125px" :options="options2" :value="short_url" @complete="completema"></uv-qrcode>
									<!-- <tki-qrcode ref="inviteQrcode" cid="invite-qrcode" :val="qrcodeValue" :size="260" :show="false" :loadMake="true" :showLoading="false" @result="qrcodeResult" /> -->
									<!-- <ayQrcode ref="qrcode" :modal="modal_qr" :url="short_url" @hideQrcode="hideQrcode" :height="80"
										:width="80" /> -->
										<!-- <u-qrcode text="https://www.example.com" size="200"></u-qrcode> -->
										<!-- <uqrcode ref="uqrcode" size="125" canvas-id="qrcode" :value="short_url" :options="options"></uqrcode> -->
										<!-- <canvas id="qrcode" canvas-id="qrcode" :foregroundImageSrc="info.avatar" style="width: 125px;height: 125px;"></canvas> -->
								</view>
								<!-- <image :src="qrcodeSrc" mode="aspectFit" style="width: 300px; height: 300px;"></image> -->
								<span class="saotit">扫一扫下载app了解此项目</span>
								<view class="tutwo">
									<view class="renwu" v-if="type=='task'">
										<img :src="posterinfo.thmub" mode="" class="renlogo" />
										<view class="renright">
											<span class="rentit">{{posterinfo.title}}</span>
											<span class="jia">￥{{posterinfo.price}}</span>
										</view>
									</view>
									<view class="renwu" v-if="type=='shang'">
										<img :src="posterinfo.image" mode="" class="renlogo" />
										<view class="renright">
											<span class="rentit">{{posterinfo.title}}</span>
											<span class="jia">￥{{posterinfo.price}}</span>
										</view>
									</view>
									<view class="renwu" v-if="type=='quan'">
										<img :src="posterinfo.image" mode="" class="renlogo" />
										<view class="renright">
											<span class="rentit">{{posterinfo.title}}</span>
											<!-- <span class="jia">￥{{posterinfo.price}}</span> -->
										</view>
									</view>
								</view>
							</view>

						</view>
						<!-- <image v-else :src="posterUrl" mode="widthFix" class="xuantu"></image> -->
						<view class="generate-image" id="renderjs-view" :msg="Hasshop" @click="canvasImage.generateImage"
									:change:msg="canvasImage.generateImage" style="position: absolute;z-index:-1">生成图片</view>
						<view class="popone" v-if="sone">
							<!-- <text class="stit">分享</text> -->
							<view class="yaoview">
								<view class="yaoleft" @click="shareitem(1)">
									<image src="/static/img/weixin.png" mode="" class="haiview"></image>
									<text>微信</text>
								</view>
								<view class="yaoleft" @click="shareitem(2)">
									<image src="/static/img/pengquan.png" mode="" class="haiview"></image>
									<text>朋友圈</text>
								</view>
								<view class="yaoleft" @click="shareitem(3)">
									<!-- <text class="wlIcon-image"></text> -->
									<image src="/static/img/file.png" mode="" class="haiviews"></image>
									<text>保存</text>
								</view>
							</view>
							<view class="quview" @click="posterquxiao">
								取消
							</view>
						</view>
					</view>
				<!-- </u-popup> -->
			</view>
		</view>
	</view>
	
	</view>

</template>

<script>
import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js';
import QRCode from 'qrcode' 	
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
// import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
import UQRCode from 'uqrcodejs';
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
export default {
	components: {
		"ayQrcode": ayQrcode,
		tkiQrcode
	},
	props: {
		postershow: {
			type: Boolean,
			default: false
		},
		posterinfo:{
			type:Object,
			default:{}
		},
		leitype:{
			type:String,
			default:''
		},
		type:{
			type:String,
			default:''//首页 task 项目圈 quan 悬赏 shang
			
		}
	},
	data() {
		return {
			riqi:'',
			posterUrl: '', // 生成画布的图片
			Hasshop: '',
			psdshow: false,
			ptype:1,//分享海报 2分享链接
			linpath:'',
			qrcodeSrc:'',
			modal_qr: false,
			short_url: '',
			options: {
				// margin: 10,
				// size:'25'
			},
			info:{},
			isma:false,
			sone:false,
			configinfo:uni.getStorageSync('configinfo'),

			qrcodeValue: '', // 二维码参数
			posterQrcode: '', // 二维码图片
			qrcodeDrawFinish: false, // 二维码绘制完成,
			options2: {
				// data: 'https://www.uvui.cn',
				// size: 300,
				// useDynamicSize: false,
				// errorCorrectLevel: 'Q',
				// margin: 10,
				// areaColor: "#F95F6B",
				// backgroundColor: "#3c9cff",
				// 指定二维码前景，一般可在中间放logo
				// foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
			}
		}
	},
	onReady() {

	},
	created(){
		
	},
	onLoad() {
	},
	watch: {
		postershow: {
		    immediate: true, //立即执行
		    deep: true, //深度侦听复杂类型
		    handler(newval, oldval) {
		      if (newval) {
		        this.postershow = newval
				if(!this.Hasshop){
					this.getuserinfo()
				}
				// this.getuserinfo()
				
				// this.Hasshop = this.shareinfo.title
		      }
		    }
		  }
	},
	methods: {
		async getuserinfo(){
			let res = await this.$u.api.usergetData({
			});
			this.info = res
			// this.options2.foregroundImageSrc = this.info.logoshare
			this.short_url = this.info.qrcode
			this.qrcodeValue = this.short_url
			this.isma = true
			// console.log(this.short_url)
			// this.createQRCode(this.short_url)
			// console.log(UQRCode)
			// var qr = new UQRCode();
			// // 设置二维码内容
			// qr.data = this.short_url;
			// // 设置二维码前景图，可以是路径s
			// qr.foregroundImageSrc = this.info.avatar
				
			// // 设置二维码大小，必须与canvas设置的宽高一致
			// qr.size = 125;
			// // 调用制作二维码方法
			// qr.make();
			// // 获取canvas上下文
			// var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// // 设置uQRCode实例的canvas上下文
			// qr.canvasContext = canvasContext;
			// // 调用绘制方法将二维码图案绘制到canvas上
			// // qr.drawCanvas();
			// this.$nextTick(() => {
			// 	qr.drawCanvas();
			// 	this.isma = true
			// })
			let that = this
			// if(that.isma){
			// 	setTimeout(() => {
			// 		that.Hasshop = that.info.code
			// 	}, 3000);
			// 	// that.Hasshop = that.info.code
			// }
			
			
			// this.createQRCode(this.info.qrcode)
			
			// this.user = res.user
		},
		completema(e){
			console.log(e)
			if(e.success){
				//二维码加载成功
				this.Hasshop = this.info.code
			}
		},
		// 展示二维码
		showQrcode() {
			let _this = this;
			this.modal_qr = true;
			// uni.showLoading()
			// 
			setTimeout(function() {
				// uni.hideLoading()
				_this.$refs.qrcode.crtQrCode()
				_this.Hasshop = _this.info.code
			}, 100)
		},
		// 获取二维码
		qrcodeResult(img) {
			img && this.turnBase64Image(img, 'posterQrcode')
		},
		// 将图片转为base64位url
		turnBase64Image(img, key) {
			uni.getImageInfo({
				src: img,
				success: image => {
					pathToBase64(image.path)
						.then(base64 => {
							this[key] = base64;
						})
						.catch(error => {
							console.log('base 64 error: ', error);
						});
				},
				fail: err => {
					console.log('getImageInfo error: ', err);
				}
			});
		},
		createQRCode(text) {
			QRCode.toDataURL(text)
				.then(url => {
				this.qrcodeSrc = url
				console.log(this.qrcodeSrc) 
				let that = this
				that.Hasshop = that.info.code
				// setTimeout(() => {
				// 	that.Hasshop = that.info.code
				// }, 3000);
				
				})
				.catch(err => {
					console.log("++++")
				console.error(err)
				})
		},

		posterquxiao(){
			this.$emit('postercancel', false);
			// this.sone = false
			// this.isma = false
		},
		//传入组件的方法
		hideQrcode() {
			this.modal_qr = false;
		},
		baocun(e){
			//保存图片
			this.ptype = e
			// this.psdshow = true
			// return;
			// #ifdef APP-PLUS
			// this.loadBase64Url()
			
			const imageStr = this.posterUrl;
			this.linpath = imageStr
			this.psdshow = true
			// base64ToPath(imageStr)
			// 	.then(path => {
			// 		
			// 		this.linpath = path
			// 		this.psdshow = true
			// 	})
			// 	.catch(error => {
			// 		console.error('临时路径转换出错了：', error);
			// 	});
			
			// #endif
			// #ifdef H5
			uni.showToast({
				title: '浏览器请截图保存',
				icon:'none',
				duration: 1000
			});
			// #endif
		},
		copy(){
			this.$wanlshop.copy(this.url)
		},
		/* 将base64 位的图片路径转换为 临时路径 */
		loadBase64Url() {
			const imageStr = this.posterUrl;
			base64ToPath(imageStr)
				.then(path => {
					this.saveImage(path);
				})
				.catch(error => {
					console.error('临时路径转换出错了：', error);
				});
		},
		// 保存图片到手机相册
		saveImage(filePath) {
			let that = this
			uni.saveImageToPhotosAlbum({
				filePath, // 需要临时文件路径，base64无法保存
				success: () => {
					uni.showToast({
						title: '保存图片成功',
						icon:'none',
						duration: 1000
					});
					that.$emit('postercancel', false);
					// this._showToast('保存图片成功');
				},
				fail: () => {
					uni.showToast({
						title: '保存失败，请重试',
						icon:'none',
						duration: 1000
					});
					that.postershow = false;
					// this._showToast('保存失败，请重试');
				}
			});
		},
		// 获取生成的base64 图片路径
		receiveRenderData(val) {
			// 
			// console.log(val)
			// uploads({
			// 	img1:val.url.replace(/[\r\n]/g, '')
			// }).then((res) => {
			// 	this.posterUrl = res.img1; // 去除base64位中的空格
			// 	// 
			// })
			
			this.posterUrl = val.url.replace(/[\r\n]/g, ''); // 去除base64位中的空格
			// 
			setTimeout(() => {
				this.sone = true
			}, 1500);
			
		},
		//预览图片
		previewImage() {
			var imgArr = [];
			imgArr.push(this.posterUrl)
			uni.previewImage({
				urls: imgArr,
				current: this.posterUrl,
				indicator: 'number'
			});
		},
		shareitem(e){
			console.log(this.isma)
			// #ifdef H5
			uni.showToast({
				title: '浏览器请截图保存',
				icon:'none',
				duration: 1000
			});
			// #endif
			// #ifdef APP-PLUS
			let provider ='weixin'
			let scene = ''
			if(e == 1){
				//分享微信
				provider = 'weixin'
				scene = 'WXSceneSession'//微信聊天
			}else if(e == 2){
				provider = 'weixin'
				scene = 'WXSceneTimeline'
			}else if(e == 3){
				//保存
				// this.saveImage(this.posterUrl);
				// this.posterquxiao()
				this.loadBase64Url()
				return false;
			}
			const imageStr = this.posterUrl;
			let that = this
			base64ToPath(imageStr)
				.then(path => {
					console.log(path)
					// uni.downloadFile({
					// 	url: path,
					// 	success: (e) => {
					// 		console.log(e)
					// 		let that = this
					        that.getshare();//调用分享接口
							uni.share({
								provider:provider,
								scene: scene,
								type: 2,
								href: this.short_url,
								imageUrl: path,
								success: function (res) {
									console.log(res)
									that.posterquxiao()
									
								},
								fail: function (err) {
									console.log(err)
									that.posterquxiao()
									
								}
							});
							// uni.compressImage({
							// 	src:e.tempFilePath,
							// 	quality: 80,
							// 	success: res => {
							// 		console.log(res)
									
							// 	}
							// })
							
				// 		},
				// 	})
				// })
				// .catch(error => {
				// 	console.error('临时路径转换出错了：', error);
				});
			
			// #endif
		},
		loadBase64Url() {
				const imageStr = this.posterUrl;
				base64ToPath(imageStr)
					.then(path => {
						this.saveImage(path);
					})
					.catch(error => {
						console.error('临时路径转换出错了：', error);
					});
				
				// uni.saveImageToPhotosAlbum({
				// 	filePath:imageStr, // 需要临时文件路径，base64无法保存
				// 	success: (e) => {
						
				// 		// this._showToast('保存图片成功');
				// 	},
				// 	fail: (err) => {
						
				// 		// this._showToast('保存失败，请重试');
				// 	}
				// });
			},

			// 保存图片到手机相册
			saveImage(filePath) {
				uni.saveImageToPhotosAlbum({
					filePath, // 需要临时文件路径，base64无法保存
					success: () => {
						this.posterquxiao()
						uni.showToast({
							title: '保存图片成功',
							icon:'none',
							duration: 1000
						});
						// this._showToast('保存图片成功');
					},
					fail: () => {
						// this._showToast('保存失败，请重试');
					}
				});
			},
			async getshare(){
				//task shang quan
				let res = await this.$u.api.addShare({
					id:this.posterinfo.id,
					type:this.type
				});
				// console.log(res)
			}
	}
}
</script>
<script lang="renderjs" module="canvasImage">
	import html2canvas from 'html2canvas'
	export default {
		mounted() {
		},
		methods: {
			// 生成图片需要调用的方法
			generateImage(e, ownerFun) {
				// const dom = document.querySelector("#pagePoster")
				// var width = dom.offsetWidth; //获取dom 宽度
				// 
				// (window.html2canvas || html2canvas)(this.$refs.htmlCanvas, {
				// backgroundColor: null
				// }).then((canvas) => {
				// let dataURL = canvas.toDataURL("image/png");
				// this.shareImgUrl = dataURL;
				// 
				// })
				let that = this
                setTimeout(() => {
                	const dpi = 1000;
					const dom = document.getElementById('pagePoster')
					window.pageYoffset = 0;
					document.documentElement.scrollTop = 0;
					document.body.scrollTop = 0;
					new html2canvas(dom, {
						// width: dom.clientWidth, //dom 原始宽度
						// height: dom.clientHeight,
						// scrollY: 0,
						// scrollX: 0,
						// dpi: 300,
						scale: 2, // 根据 dpi 计算 scale 值
						useCORS: true
					}).then((canvas) => {
						// ownerVm.callMethod('isFlagBtn', false)
						let imgurl = canvas.toDataURL('image/png')
						this.$ownerInstance.callMethod('receiveRenderData', {
							url: canvas.toDataURL('image/png')
						})
						// ownerVm.callMethod('receiveRenderData', imgurl)
					}).catch(err => {
						// 
					})
                }, 1000)
				// const dom = document.getElementById('pagePoster') // 需要生成图片内容的 dom 节点
				// 
				
			}
		}
	}
</script>
<style lang="scss" scoped>
/deep/.u-drawer-bottom {
	background-color: transparent;
}
/deep/.u-mode-center-box{
	background-color: transparent;
}
.pview{
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.posview {
	
	width: 100%;
	height: 490px;
	
	display: flex;
	flex-direction: column;
	.positem{
		// background-color: #f2f2f2;
		// border-radius: 25rpx 25rpx;
		// padding: 20rpx 30rpx;
		position: relative;
		height: 100%;
		// border-radius: 25rpx;
		display: flex;
		flex-direction: column;
	}
	.mtbg{
		width: 100%;
		height: 100%;
		// position: absolute;
		// border-radius: 25rpx;

	}
	.haiviewone{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.haiview{
		margin-top: auto;
		position: relative;
		display: flex;
		justify-content: center;
		margin-bottom: 13%;
		.ma{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 5px solid #fff;
		}
	}
	.poshead{
		display: flex;
		flex-direction: row;
		align-items: center;
		.hone{
			width: 120rpx;
			height: 120rpx;
			position: relative;
			.honeimage{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.honebot{
				background-color: rgba(251,0,79,1);
				color: #fff;
				width: 100%;
				height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: -10rpx;
				left: 0;
				border-radius: 10rpx;
				.pzhiicon{
					width: 20rpx;
					height: 20rpx;
					margin-right: 4rpx;
				}
				.pzhibo{
					font-size: 20rpx;
					color: #fff;
					font-weight: 400;
				}
			}
		}
		.htwo{
			width: 70%;
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			.twoname{
				color: #000;
				font-size: 33rpx;
				font-weight: bold;
			}
			.guankan{
				color: #666;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
		.hthree{
			margin-left: auto;
			.douyin{
				width: 30rpx;
				height: 30rpx;
				margin-right: 5rpx;
			}
			.doutext{
				color: #000;
				font-size: 32rpx;
				font-weight: bold;
			}

		}
	}
	.postwo{
		display: flex;
		flex-direction: row;
		margin: 25rpx 0 10rpx;
		align-items: center;
		.timeSelector{
			width: 35rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
		.timetext{
			color: #666;
			font-size: 26rpx;
		}
	}
	.zhiboshop{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 25rpx;
		.zhihead{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 10rpx;
			.zhiname{
				color: #333;
				font-size: 30rpx;
				margin-right: 8rpx;
				display: inline-block;
				font-weight: 500;
			}
			.haohuo{
				color: #666;
				font-size: 20rpx;
			}
		}
		.shopview{
			display: flex;
			flex-direction: column;

			.shopitem{
				display: flex;
				flex-direction: row;
				// margin-bottom: 20rpx;
				padding: 15rpx 0 15rpx;
				border-bottom: 1rpx solid #eee;
				.shopitemimg{
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.shopright{
					display: flex;
					flex-direction: column;
					flex: 1;
					.srhead{
						// text-overflow: -o-ellipsis-lastline;
						// overflow: hidden;				//溢出内容隐藏
						// text-overflow: ellipsis;		//文本溢出部分用省略号表示
						// display: -webkit-box;			//特别显示模式
						// -webkit-line-clamp: 2;			//行数
						// line-clamp: 2;					
						// -webkit-box-orient: vertical;
					}
					.douyin{
						width: 28rpx;
						height: 28rpx;
					}
					.rname{
						color: #000;
						font-weight: 500;
						font-size: 26rpx;
					}
					.zhijia{
						color: rgba(220,10,54,1);
						font-weight: 400;
						font-size: 24rpx;
						display: block;
						margin-top: auto;
					}
					.zhinum{
						font-size: 38rpx;
						font-weight: bold;
						display: inline-block;
						margin-left: 5rpx;
					}
				}
			}
		}
	}
	.faview{
		padding: 20rpx;
		background-color: #fff;
		border-radius: 25rpx;
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		.faleft{
			display: flex;
			flex-direction: column;
			width: 70%;
			.faname{
				font-size: 21rpx;
				color: #333;
				font-weight: 400;
			}
			.famiao{
				font-size: 22rpx;
				color: #333;
				font-weight: 500;
			}
			.changan{
				padding: 5rpx 8rpx;
				background-color: rgba(255,235,229,1);
				color: rgba(220,10,54,1);
				font-size: 25rpx;
				display: flex;
				border-radius: 50rpx;
				margin-top: 30rpx;
				width: 200rpx;
				font-weight: 500;
				align-items: center;
				justify-content: center;
			}
		}
		.faright{
			width: 30%;
			display: flex;
			align-items: center;
			justify-content: center;
			.erweima{
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
			}
		}
	}
}
.baoview{
	margin-top: 20rpx;
	display: flex;
	flex-direction: row;
	justify-content:center;
	padding: 0 0rpx;
	height: 80rpx;
	.baoitem{
		width: 40%;
		height: 73rpx;
		border-radius: 50rpx;
		background-color: rgba(251,81,25,1);
		// background-color: ;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 30rpx;
		margin: 0 5%;
	}

	.fenxiang{
		background-color: #DDB468;
		color: #753F0C;
	}
}
.txt{
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis; //溢出显示省略号
}
/deep/.u-drawer-bottom {
	background-color: transparent;
}

.popone {
	width: 100%;
    height: 145px;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 10px 0 10px;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
	.stit{
		color: #000;
		font-size: 32rpx;
		display: block;
		text-align: center;
	    font-weight: 500;
	}
	.yaoview{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0rpx 30rpx 30rpx;
		.yaoleft{
			// width: 50%;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.haiview{
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 6rpx;
				padding: 8rpx;
			}
			.haiviews{
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 6rpx;
			}
			text{
				color: #333;
				font-size: 28rpx;

			}
		}
	}
	.quview{
		margin-top: auto;
		border-top: 1rpx solid #eee;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 30rpx;
	}
}
.poptu{
	width: 80%;
	height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 50rpx;
}
.mtbg{
	width: 100%;
	height: 5000rpx;

}
.tubg{
	position: relative;
	// margin: 0 75rpx 150px;
	margin: 0 50px 70px;
	// height: 850rpx;
	background-color: transparent;
	border-radius: 20rpx;
	width: 100%;
	.img_bjs{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.tubgview{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 45rpx 30rpx 30rpx;
		.logoshare{
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}
		.mabot{
			position: relative;
			margin: 20rpx 0;
		}
		.maview{
			width: 250rpx;
			height: 250rpx;
			position: relative;
			margin: 20rpx 0;

		}
		.saotit{
			font-weight: 500;
			font-size: 24rpx;
			color: #808080;
		}
		.tutwo{
			height: 23vh;
			// background-color: #000;
			width: 100%;
			margin-top: 20px;
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			
			.renwu{
				display: flex;
				flex-direction: row;
				width: 100%;
				align-items: center;
				.renlogo{
					width: 120rpx;
					border-radius: 10rpx;
					height: 120rpx;
					margin-right: 16rpx;
					border: 1px solid #1D8DFD;
				}
				.renright{
					display: flex;
					flex-direction: column;
					width: 62%;
					.rentit{
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
					.jia{
						font-weight: bold;
						font-size: 36rpx;
						color: #FF2424;
						display: block;
						margin-top: 5rpx;
					}
				}

			}
		}
	}
}

.first-gift-boxs{
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transform: translate3D(0px, 0px, 0px) !important;
	.content-box{
		// transition: all 1s ease;
		position: relative;
		border-radius: 10px;
		width: 600rpx;
		// height: 605rpx;
		// background: url("../../static/images/homeIndex/first-login.png") center no-repeat;
		background-size: 100% 100%;
		// background-color: #fff;
		.popview{
            width: 100%;
            // height: 600rpx;
            // min-height: 500rpx;
            // background-color: #fff;
            border-radius: 25rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            // padding: 40rpx 30rpx;
		}
	}
}	
.xuantu{
	margin: 30rpx auto;
}
</style>
